<template>
  <a-select
    showSearch
    :disabled="disabled"
    :placeholder="placeholder"
    style="width: 100%"
    @change="handleChange"
    :filterOption="filterOption"
    option-filter-prop="children"
    v-model="selectedValue"
    allowClear
    :getPopupContainer="getPopupContainer"
  >
    <a-select-option v-for="(d,key) in options" :key="key" :value="d.id">
      <span style="display: inline-block;width: 100%" :title="d.car_num">
        {{ d.car_num }}
      </span>
    </a-select-option>
  </a-select>
</template>

<script>
import { getAction } from '@api/manage'
export default {
  name: 'SelectCarNumInput',
  props: {
    disabled: Boolean,
    value: [String, Number],
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    getPopupContainer: {
      type: Function,
      default: (node) => node.parentNode
    }
  },
  data() {
    return {
      selectedValue: '',
      options: []
    }
  },
  created() {
    this.initDictData()
  },
  mounted(){
    this.selectedValue = this.value?this.value:undefined
  },
  watch: {
    value(val){
      this.selectedValue = val?val.toString():null
    }
  },
  methods: {
    initDictData() {
      getAction('/api/erp/carmaintenance/erpCarMaintenance/carNumList').then(res => {
        if(res.success){
          this.options = res.result
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleChange(selectedValue) {
      console.log('selectedValue', selectedValue)
      this.selectedValue = selectedValue
      this.callback()
    },
    callback() {
      this.$emit('change', this.selectedValue)
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<style scoped></style>
